<template>
	<view style="padding-top: 180rpx;">

		<view class="card">
			<view class="flex u-col-center u-row-between u-m-t-10" @click="handleChangeCentShop">
				<view class=" u-font-28" style="color:#df9400;" v-if="centShopInfo.name">{{centShopInfo.name}}&nbsp;&nbsp;(
				<span v-if="centShopInfo.status=='-1'">欠费</span>
				<span v-if="centShopInfo.status=='0'">正常</span>
				<span v-if="centShopInfo.status=='1'">预警</span>
				<span v-if="centShopInfo.status=='-2'">停止合作</span>
				<span v-if="centShopInfo.status=='-3'">闭店</span>
				)</view>
				<view class=" u-font-28" style="color:#999 ;" v-else>未绑定店铺信息</view>
				<u-icon name="arrow-right" size="14"></u-icon>
			</view>
			<view class="text-center u-font-32 u-m-t-40">{{billInfo.billTime}} 美团结算收入</view>
			<view class="text-center u-m-t-32">
				<text class="unit">￥</text>
				<text class="amount">{{parseFloat(billInfo.money?billInfo.money:0).toFixed(2)}}</text>
			</view>
			<view @tap="$u.route('/pages/bill/orderBill/orderBillList?centShopId='+centShopInfo.centShopId)"
				class="flex u-row-center u-m-t-80">
				<view class="u-font-26" style="color: #999;">查看全部订单</view>
				<u-icon name="arrow-right" size="12" color="#999"></u-icon>
			</view>


		</view>

		<view class="card">
			<view style="display: flex;margin-top: 28rpx;justify-content:center;">
				<view class="text-center u-font-32" style="width: 50%;">当日消耗
				</view>
				<view class="text-center u-font-32" style="width: 50%;">当前余额</view>
			</view>
			<view style="display: flex;justify-content:center;">
				<view class="text-center u-m-t-32" style="width: 50%;">
					<text class="amount-xiaohao" style="font-size: 28rpx;">￥</text>
					<text class="amount-xiaohao">{{parseFloat(billInfo.serivceAmount+billInfo.prescriptionAmount).toFixed(2)}}</text>
				</view>
				<view class="text-center u-m-t-32" style="width: 50%;">
					<text class="amount-yueer" style="font-size: 28rpx;">￥</text>
					<text
						class="amount-yueer">{{parseFloat(centShopInfo.balance?centShopInfo.balance:0).toFixed(2)}}</text>
				</view>
			</view>
		</view>
		<login ref="login" @refresh="refresh"></login>
		<u-picker :show="show" :columns="companyList" keyName="name" @confirm="confirm" @cancel="cancel"></u-picker>
	</view>
</template>

<script>
	import login from '@/components/x-unit/login/login.vue'
	import {
		getToDayOrderBill,
		getUserInfoCentShopList,
		getNewsDetails
	} from '@/common/api/api.js'
	export default {
		components: {
			login,
		},
		data() {
			return {
				tab: 'bill',
				billInfo: {
					counts: 0,
					money: 0,
					serivceAmount:0,
					prescriptionAmount:0,
					billTime:''
				},
				companyId: '',
				userInfoCentShopList: [],
				centShopInfo: {},
				userInfoId: '',
				show: false,
				companyList: [],
				news:{}
			}
		},
		onShow() {
			if (!this.$store.state.$token) {
				setTimeout(() => {
					this.$refs.login.open();
				}, 100);
			} else {
				// if (this.$store.state.$userInfo.isShiming == 0) {
				// 	setTimeout(() => {
				// 		uni.$u.route('/pages/personal/userInfo/userInfo');
				// 	}, 100);
				// }
			}
			this.userInfoId = this.$store.state.$token;
			// this.centShopInfo = this.$store.state.$centShopInfo;
			this.getUserInfoCentShopList();
			this.handleGetNewsDetails();
		},
		methods: {
			handleGetNewsDetails(){
				getNewsDetails().then(res=>{
					this.news=res.data;
				})
			},
			handleChangeCentShop() {
				this.show = true;
			},
			confirm(e) {
				console.log(e)
				this.show = false;
				this.centShopInfo=e.value[0];
				this.$store.commit('$uStore', {
					name: '$centShopInfo',
					value: this.centShopInfo
				});
				this.handleGetToDayOrderBill(e.value[0].centShopId);
			},
			cancel() {
				this.show = false;
			},
			handleGetToDayOrderBill(centShopId) {
				getToDayOrderBill({
					centShopId: centShopId
				}).then(res => {
					if (res.data) {
						// this.billInfo.counts = res.data.listCount;
						this.billInfo.money = res.data.settleAmount;
						this.billInfo.serivceAmount=res.data.serivceAmount;
						this.billInfo.prescriptionAmount=res.data.prescriptionAmount;
						this.billInfo.billTime=res.data.billTime
					} else {
						// this.billInfo.counts = 0;
						this.billInfo.money = 0;
						this.billInfo.serivceAmount=0;
						this.billInfo.prescriptionAmount=0;
						this.billInfo.billTime="";
						
					}
				})
			},
			getUserInfoCentShopList() {
				this.companyList = [];
				getUserInfoCentShopList({
					userInfoId: this.userInfoId
				}).then(res => {
					this.userInfoCentShopList = res.data.list;
					this.companyList.push(res.data.list);
					if (this.userInfoCentShopList.length > 0) {
						if(!this.$store.state.$centShopInfo){
							this.centShopInfo = this.userInfoCentShopList[0];
							this.$store.commit('$uStore', {
								name: '$centShopInfo',
								value: this.centShopInfo
							});
							this.handleGetToDayOrderBill(this.centShopInfo.centShopId);
						}else{
							console.log("xxxxxxx",this.$store.state.$centShopInfo)
							this.userInfoCentShopList.map(item=>{
								this.centShopInfo = this.$store.state.$centShopInfo;
								if(item.centShopId==this.centShopInfo.centShopId){
									this.$store.commit('$uStore', {
										name: '$centShopInfo',
										value: item
									});
									this.centShopInfo=item;
									this.handleGetToDayOrderBill(this.centShopInfo.centShopId);
								}
								
							})
							
							
						}
					}

				})
			},

		}
	}
</script>

<style lang="scss">
	.navbar-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
		height: 176rpx;
		background: linear-gradient(90deg, #C8CDFF 0%, #CBFFFA 54%, #81D8CF 100%);
		border-radius: 0px 0px 0px 0px;
		filter: blur(50rpx);
	}

	.navbar {
		background: linear-gradient(90deg, #C8CDFF 0%, #CBFFFA 54%, #81D8CF 100%);
	}

	.cell2 {
		width: 686rpx;
		height: 140rpx;
		background: linear-gradient(90deg, #F6FFFB 0%, #FFFFFF 50%, #FFFFFF 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #FFFFFF;

		.name {
			font-size: 28rpx;
			font-weight: 800;
			color: #333333;
		}

		.tips {
			font-size: 24rpx;
			color: #F97D3F;
		}

		.line {
			width: 0px;
			height: 80rpx;
			opacity: 1;
			border: 2rpx solid #EEEEEE;
			margin-top: 30rpx;
		}
	}

	.card {
		padding-top: 24rpx;
		padding-bottom: 28rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-top: 30rpx;
		width: 686rpx;
		min-height: 320rpx;
		border-radius: 16rpx;
		border: 2rpx solid #FFFFFF;

		.title {
			position: relative;
			z-index: 1;
			font-size: 36rpx;
			font-weight: normal;
			color: #282828;
			font-weight: 800;
		}

		.title::before {
			position: absolute;
			bottom: 4rpx;
			z-index: -1;
			content: '';
			width: 90rpx;
			height: 8rpx;
			background: linear-gradient(90deg, #FD6140 0%, rgba(253, 96, 61, 0) 100%);
			border-radius: 0px 0px 0px 0px;
		}

		.green-title {
			position: relative;
			z-index: 1;
			font-size: 36rpx;
			font-weight: normal;
			color: #282828;
			font-weight: 800;
		}

		.green-title::before {
			position: absolute;
			bottom: 4rpx;
			z-index: -1;
			content: '';
			width: 90rpx;
			height: 8rpx;
			background: linear-gradient(90deg, #81D8CF 0%, rgba(129, 216, 207, 0) 100%);
			border-radius: 0px 0px 0px 0px;
		}


		.note {
			font-size: 24rpx;
			color: #999999;
			margin-left: 12rpx;
		}

		.label {
			font-size: 32rpx;
			font-weight: 800;
			color: #333333;
		}
	}

	.g-red {
		background: linear-gradient(180deg, #FFF4F2 0%, #FFFFFF 50%, #FFFFFF 100%);
		opacity: 1;
	}

	.product {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		// overflow-y: scroll;
	}
</style>
<style scoped lang="scss">
	.card {
		margin: 32rpx;
		border-radius: 16rpx;
		background-color: #fff;
		padding: 32rpx 32rpx;

		.unit {
			font-size: 40rpx;
			color: #81D8CF;
			font-weight: 800;
		}

		.amount {
			font-size: 60rpx;
			font-weight: 800;
			color: #81D8CF;
			margin-left: 10rpx;
		}

		.amount-xiaohao {
			font-size: 40rpx;
			font-weight: 800;
			color: #e27900;
			margin-left: 10rpx;
		}

		.amount-yueer {
			font-size: 40rpx;
			font-weight: 800;
			color: #999;
			margin-left: 10rpx;
		}
	}
</style>